<template>
  <div class="employees-container agentWork">
    <div class="app-container boc_flex">
      <transition name="el-fade-in-linear">
        <el-row v-if="showSubmitWork == false && showCz == false">
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-row>
                <el-col :span="24"
                  ><div class="grid-content bg-purple-dark">
                    <el-card class="box-card" style="height: 120px">
                      <el-row>
                        <el-col :span="16"
                          ><div class="grid-content bg-purple grid-flex">
                            <div class="nav_box">
                              <span style="margin-bottom: 10px">工单总数</span>
                              <span style="font-weight: 900; font-size: 20px"
                                >36</span
                              >
                            </div>
                            <div class="nav_box">
                              <span style="margin-bottom: 10px">草稿数</span>
                              <span style="font-weight: 900; font-size: 20px"
                                >36</span
                              >
                            </div>
                            <div class="nav_box">
                              <span style="margin-bottom: 10px">已下发</span>
                              <span style="font-weight: 900; font-size: 20px"
                                >36</span
                              >
                            </div>
                            <div class="nav_box">
                              <span style="margin-bottom: 10px">未关闭数</span>
                              <span style="font-weight: 900; font-size: 20px"
                                >36</span
                              >
                            </div>
                          </div></el-col
                        >
                        <el-col :span="8"
                          ><div
                            class="grid-content bg-purple-light"
                            style="position: relative"
                          >
                            <el-button
                              type="primary"
                              round
                              style="position: absolute; right: 0"
                              @click="showSubmitWork = true"
                              >新增工单</el-button
                            >
                            <BtnRadio
                              :list="list"
                              @changeBtnValue="changeBtnValue"
                              style="position: absolute; right: 0; top: 50px"
                            /></div
                        ></el-col>
                      </el-row>
                    </el-card></div
                ></el-col>
              </el-row>
              <div style="margin-top: 10px"></div>

              <el-row>
                <el-col :span="24"
                  ><div class="grid-content bg-purple-dark">
                    <el-card class="box-card" style="height: 760px">
                      <el-table
                        :header-row-style="{ height: '30px' }"
                        :data="tableData"
                        style="width: 100%"
                        height="71vh"
                        border
                        :header-cell-style="{
                          background: 'rgb(179, 224, 240)',
                          color: 'rgb(51, 51, 51)',
                          fontSize:'16px'
                        }"
                      >
                        <el-table-column
                          label="工单编号"
                          width="80"
                          align="center"
                          prop="number"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="gdTitle"
                          label="工单标题"
                          width="100"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="startTime"
                          label="开始时间"
                          width="100"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="endTime"
                          label="结束时间"
                          width="100  "
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="runTime"
                          label="持续时间"
                          width="80"
                          align="center"
                        >
                        </el-table-column>

                        <el-table-column
                          prop="nowStatus"
                          label="当前状态"
                          width="80"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="gdFormwork"
                          label="工单模板"
                          width="80"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          label="进度"
                          align="center"
                          width="600"
                        >
                          <template slot-scope="scope">
                            <el-steps
                              :space="200"
                              :active="scope.row.active"
                              finish-status="success"
                            >
                              <el-step title="工单下发"></el-step>
                              <el-step title="工单确认"></el-step>
                              <el-step title="工单处理中"></el-step>
                              <el-step title="工单审核"></el-step>
                              <el-step title="工单待关闭"></el-step>
                              <el-step title="工单关闭"></el-step>
                            </el-steps>
                          </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                          <template slot-scope="scope">
                            <el-button
                              size="mini"
                              @click="CHbtn(scope.$index, scope.row)"
                              v-if="
                                scope.row.nowStatus == '待确认' ||
                                scope.row.nowStatus == '处理中'
                              "
                              >撤回</el-button
                            >
                            <el-button
                              size="mini"
                              @click="xfBtn(scope.$index, scope.row)"
                              v-if="scope.row.nowStatus == '草稿'"
                              >下发</el-button
                            >
                            <el-button
                              size="mini"
                              v-if="
                                scope.row.nowStatus == '已审核' ||
                                scope.row.nowStatus == '处理中' ||
                                scope.row.nowStatus == '待关闭'
                              "
                              @click="GBbtn(scope.$index, scope.row)"
                              >关闭</el-button
                            >
                            <el-button
                              size="mini"
                              type="info"
                              @click="XQbtn(scope.$index, scope.row)"
                              >详情</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                      <div
                        style="
                          width: 100%;
                          text-align: center;
                          padding-top: 18px;
                        "
                      >
                        <el-pagination
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="pageNumber"
                          :page-sizes="[10, 20, 30, 40]"
                          :page-size="pageSize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="tableData.length"
                        >
                        </el-pagination>
                      </div>
                    </el-card></div
                ></el-col>
              </el-row></div
          ></el-col>
        </el-row>
      </transition>
      <transition name="el-fade-in">
        <subimtWork
          v-if="showSubmitWork"
          @changeDialogShow="showSubmitWork = false"
          class="showSubmitWork"
        />
        <DialogCmp
          v-if="showCz"
          @showDialog="showDialog"
          :itemNum="itemNum"
          :rowObj="rowObj"
        />
      </transition>
    </div>
  </div>
</template>

<script>
import BtnRadio from "@/components/BtnRadio";
import subimtWork from "@/views/subimtWork";
import DialogCmp from "@/components/DialogCmp";
import { Lists, close, issue, revocation } from "@/api/zngd.js";
// 代办工单
export default {
  name: "agentWork",

  data() {
    return {
      //
      list: ["全部", "存草稿", "处理中", "审核中", "等待关闭"],
      tableData: [],

      showSubmitWork: false, //新增弹窗
      showCz: false, //详情弹窗
      percentage: 20, //进度
      customColor: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ], //进度条颜色
      // fromBtn: "确认",
      itemNum: "",
      pageNumber: 1,
      pageSize: 10,
      nowStatus: "全部", //筛选
      rowObj: "", //详情回单obj
    };
  },
  components: {
    BtnRadio,
    subimtWork,
    DialogCmp,
  },

  mounted() {
    this.listVals();
  },

  methods: {
    listVals() {
      if (this.nowStatus === "全部") {
        this.nowStatus = "";
      }
      Lists(this.pageSize, this.pageNumber, this.nowStatus).then((res) => {
        console.log(res, "ccccccccsss");
        this.tableData = res.list;
        res.list.forEach((i) => {
          if (i.nowStatus === "工单已下发") {
            i.nowStatus = "待确认";
          } else if (i.nowStatus === "存草稿") {
            i.nowStatus = "草稿";
          } else if (i.nowStatus === "处理中") {
            i.nowStatus = "处理中";
          } else if (i.nowStatus === "工单关闭") {
            i.nowStatus = "已关闭";
          } else if (i.nowStatus === "申请关闭") {
            i.nowStatus = "待关闭";
            i.active = 5;
          } else if (i.nowStatus === "审核中") {
            i.nowStatus = "待审核";
          }

          return i.nowStatus;
        });
      });
    },

    // 格式化table 内容
    formatter(row, column) {
      // return row.address;
    },
    // 触发筛选
    changeBtnValue(val) {
      console.log(val, "11");
      if (val === "处理中") {
        this.nowStatus === "工单已下发";
      } else {
        this.nowStatus = val;
      }
      console.log(val);
      // val.forEach(item=>{
      //  if( item==='存草稿'){

      //  }
      // })
      this.listVals();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.listVals();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.listVals();
      console.log(`当前页: ${val}`);
    },
    // 撤回
    CHbtn(index, row) {
      console.log(row.number, "number");
      revocation(row.number).then((res) => {
        this.listVals();
      });
    },
    // 详情
    XQbtn(index, row) {
      console.log(row, "33333333333333333333");
      this.itemNum = row.nowStatus;
      this.rowObj = row;
      this.showCz = true;
    },
    // 关闭
    GBbtn(index, row) {
      close(row).then((res) => {
        this.listVals();
      });
    },
    // 下发
    xfBtn(index, row) {
      issue(row).then((res) => {
        console.log(res, "csazxczxczxc");
        this.listVals();
      });
    },
    showDialog() {
      this.showCz = false;
      this.listVals();
    },
  },
};
</script>

<style lang="scss" scoped>
.boc_flex {
  // 原本高度是动态计算出来的 给死值是为了动画过渡的时候不显示滚动条
  height: 911px !important;

  display: flex;
  flex-direction: column;
  overflow: hidden;
  .nav_box {
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 80px;
    justify-content: center;
    align-items: center;
  }
}
.grid-flex {
  display: flex;
  justify-content: space-around;
}
.actived {
  background-color: red;
}

::v-deep .app-container {
  padding: 10px !important;
}
//  ::v-deep .el-card__body {
//   text-align: center;
// }
</style>
